<template>
  <el-dialog
    title="选择费用类别"
    :visible.sync="visible"
    top="1vh"
    width="1170px"
  >
    <el-container style="justify-content:center">
      <el-aside width="400px" style="box-shadow:none">
        <el-card shadow="never" style="height: calc(100% - 2px);">
          <span slot="header">费用类别目录</span>
          <el-tree
            ref="tree"
            :data="categories"
            node-key="id"
            :props="{
              children: 'children',
              label: 'name'
            }"
            default-expand-all
            @node-click="onCategoryNodeClick"
          >
            <template v-slot="{node, data}">
            <span class="tree-node">
              <span :class="{'el-icon-folder': !data.price}">&nbsp;{{node.label}}</span>
            </span>
            </template>
          </el-tree>
        </el-card>
      </el-aside>
      <el-card ref="listCard" shadow="never">
        <span slot="header">费用类别</span>
        <data-table-app-view :containerSubtractHeight="58">
          <data-table
            ref="table"
            url="/api/community/bedChargeCategory/charges"
            lazy
            :height="405"
            :pagination="{pageSize: 50}"
            @select="onSelect"
            @selection-change="onSelectionChange"
          >
            <el-table-column type="selection" width="42" />
            <el-table-column prop="name" label="费用类别名称" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column prop="price" label="每月价格" width="80"></el-table-column>
            <el-table-column prop="note" label="描述" width="260" show-overflow-tooltip></el-table-column>
          </data-table>
        </data-table-app-view>
      </el-card>
    </el-container>
    <span slot="footer">
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button type="default" @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      categories: [],
      selections: new Set()
    }
  },
  methods: {
    show(params) {
      this.visible = true;
      this.params = params;
      this.queryTree();
      this.$nextTick(async () => {
        await this.$refs.table.query({resthomeId: params.resthomeId});
        this.selections = new Set(params.selections);
        this.setSelections();
      });
    },
    async queryTree() {
      this.categories = [{
        id: 0,
        name: '全部费用类别',
        resthomeId: this.params.resthomeId,
        children: await this.$http.get('/api/community/bedChargeCategory/tree',
        {params: {resthomeId: this.params.resthomeId}})
      }];
    },
    async onCategoryNodeClick(node) {
      if (node.children.length) {
        await this.$refs.table.query({resthomeId: this.params.resthomeId, parentId: node.id});
        this.setSelections();
      } else {
        this.$refs.table.clear();
      }
    },
    onSelect(selection, row) {
      const checked = !this.selections.has(row.id);
      if (!checked) {
        this.selections.delete(row.id);
      }
    },
    onSelectionChange(selections) {
      selections.forEach(sel => {
        this.selections.add(sel.id);
      });
    },
    setSelections() {
      this.selections.forEach(id => {
        const row = this.$refs.table.tableData.find(row => row.id == id);
        this.$refs.table.toggleRowSelection(row, true);
      });
    },
    onSubmit() {
      const selections = Array.from(this.selections).map(id => {
        return this.$refs.table.tableData.find(row => row.id == id);
      });
      this.params.onOk(selections);
      this.visible = false;
    }
  }
}
</script>

<style scoped>
>>> .el-tree-node__content {
  height: 40px;
}
.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>